﻿@{
    ViewBag.Title = "JQuerySlides";
}
<link href="@Url.Content("~/Content/JQuerySlides.css")" rel="stylesheet" type="text/css" />
<script>
    $(document).ready(function () {
        //Wenn der Browser Javascript kann, dann die Klasse hinzufügen.
        $('html').addClass('js');

        //Definieren unserer "Klasse"
        var contactForm = {
            //Unser Div mit dem Formular darin
            container: $('#contact'),

            //Effekte die zur Verfügung stehen
            //slideDown
            //slideUp
            //slideToggle
            //fadeIn
            //fadeOut
            //fadeToggle

            //Configurator "Property" in dem Einstellungen gemacht werden können
            config: {
                effect: 'slideToggle',
                speed: 500
            },

            //Init ist wie unser Konstruktor und es wird "config" als Parameter übergeben
            init: function (config) {
                //damit nicht jeder Parameter in config übergeben werden muss bei, Aufrufen der Init Funktion
                //wird hier nur der wert überschrieben der übergeben wurde, der rest bleibt bei den wertden die
                //wir bereits hier im Objekt gesetzt haben, wie z.B. speed bleibt bei 500
                $.extend(this.config, config);

                //Unseren Contact Me Button dem Formular hinzufügen, der das Formular sichtbar macht
                //wird im JavaScript gemacht, da dieser nur benötigt wird, wenn JavaScript aktiviert ist
                //denn nur dann wird das Formular nicht angezeigt.
                $('<button></button>', {
                    text: 'Contact Me'
                })
                //den Button nach dem Article anfügen
                    .insertAfter('article')
                //Dem Button ein OnClick Event hinzufügen, was unser Contact Formular sichtbar macht.
                //das this hier verweist auf unser aktuelles Objekt 'contactForm' und da auf die show Function
                    .on('click', this.show);
            },
            //Show Function erstellen
            show: function () {
                //Der Container muss nur angezeigt werden wenn dieser aktuell noch nicht sichtbar ist.
                if (contactForm.container.is(':hidden')) {
                    //mit call wird ein Objekt übergeben welches als this bei der übergebenen Methode fungiert
                    contactForm.close.call(contactForm.container);
                    //Hier kann ich nicht auf this.container verweisen, da this nicht auf das aktuelle Objekt verweist
                    //sondern auf den Button, da es sich um eine Funktion handelt die onClick aufruft und hier mit this auf 
                    //das aktuelle Objekt verwiesen wird wie bei den Anonymen Funktionen.
                    //contactForm.container.show();
                    //Funktionen können auch direkt als "array" aufgerufen werden, wenn man z.b. den namen nicht kennt
                    //oder man diese z.b. als Parameter änderbar machen will
                    contactForm.container[contactForm.config.effect](contactForm.config.speed);
                }
            },

            //close Function erstellen die den Button direkt mit erstellt.
            close: function () {
                //Durch den call aufruf, steckt in this der container
                var $this = $(this);

                //damit nicht jedesmal wenn wir "contact me" aufrufen ein neues span erstellt wird
                //hier überprüfen ob bereits ein Span existiert und wenn ja nicht "unternehmen"
                if ($this.find('span.close').length) return;

                //hier ist this = contact div
                $('<span class=close>X</span>')
                    .prependTo(this)
                    .on('click', function () {
                        //hier wäre dann -> this = span
                        //$this.hide();
                        //man kann auch direkt über ein Array auf die Funktionen zugreifen
                        //die wir quasi im config setzen
                        $this[contactForm.config.effect](contactForm.config.speed);
                    });
            }
        };

        //Aufrufen, Initialisieren unserer "Klasse"
        contactForm.init({
            effect: 'fadeToggle'
        });

    });
</script>
<h2>
    JQuerySlides</h2>
<section id="main2">
    <div id="content">
        <article>
            <h1>
                Ein neuer Artikel</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
                eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
                montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
                pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla</p>
            <p>
                vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
                venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
                Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
                leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,</p>
            <p>
                dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
                laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur
                ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
                eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque
                sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas</p>
            <p>
                nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
                fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
                eget bibendum sodales, augue velit cursus nunc,
            </p>
        </article>
        <div id="contact">
            <h2>
                Contact Me</h2>
            <form action="#">
            <ul>
                <li>
                    <label for="name">
                        Name:
                    </label>
                    <input name="name" id="name">
                </li>
                <li>
                    <label for="email">
                        Email Address:
                    </label>
                    <input name="email" id="email">
                </li>
                <li>
                    <label for="comments">
                        What's Up?</label>
                    <textarea name="comments" id="comments" cols="30" rows="10"></textarea>
                </li>
                <li>
                    <input type="submit" value="Submit">
                </li>
            </ul>
            </form>
        </div>
    </div>
</section>